@import '../../assets/less/common.less';

.hm-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  &.good {
    background-color: #F9F7F7;

    .page-bar-wrap {
      // width: 750rpx;
      // position: absolute;
      // background-color: #fff;
    }

    .banner {
      width: 750rpx;
      height: 540rpx;
      // background-color: orange;
      position: relative;

      .swiper {
        width: 750rpx;
        height: 540rpx;

        .swiper-item {
          width: 750rpx;
          height: 540rpx;

          .pic {
            width: 750rpx;
            height: 540rpx;
          }
        }
      }

      .page-bar {
        width: 56rpx;
        height: 34rpx;
        background: #ffffff;
        border-radius: 2rpx;
        position: absolute;
        right: 48rpx;
        bottom: 32rpx;
        color: #333333;
        font-size: 24rpx;
        .hm-flex()
      }
    }

    .good-brief {
      width: 750rpx;
      min-height: 242rpx;
      background: #ffffff;
      padding: 32rpx;
      box-sizing: border-box;

      .price {
        color: #f92929;
        font-size: 36rpx;
        font-weight: 500;

        .unit {
          font-size: 28rpx;
        }
      }

      .score {
        margin-top: 8rpx;
        color: #F92929;
        font-size: 24rpx;

        .name {
          color: rgba(0, 0, 0, 0.40);
        }
      }

      .title-wrap {
        margin-top: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: #333333;
          font-size: 28rpx;
          font-weight: 500;
          flex-grow: 0;
        }

        .share-wrap {
          flex-shrink: 0;
          width: 80rpx;
          margin-left: 30rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .share {
            width: 32rpx;
            height: 28rpx;
            // background-color: orange;
            .hm-img("@{baseUrl}/good/share.png")
          }

          .text {
            color: rgba(0, 0, 0, 0.40);
            font-size: 24rpx;
          }
        }
      }
    }

    .good-supply {
      margin-top: 16rpx;
      width: 750rpx;
      height: 82rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      box-sizing: border-box;
      background: #ffffff;
      color: rgba(0, 0, 0, 0.40);
      font-size: 24rpx;

      .bold {
        color: #333333;
      }
    }

    .detail {
      width: 100%;
      font-size: 24rpx;
      margin-top: 16rpx;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 452rpx;
    }

    .bottom-bar {

      height: 98rpx;
      width: 750rpx;
      padding: 12rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: content-box;
      background-color: #fff;
      position: fixed;
      bottom: 60rpx;
      bottom: 0rpx;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .icon-wrap {
        width: 40rpx;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .icon {
          width: 32rpx;
          height: 32rpx;
          // background-color: orange;
          background-size: 100% 100%;

          &.chat {
            .hm-img("@{baseUrl}/good/chat.png")
          }

          &.store {
            .hm-img("@{baseUrl}/good/store.png")
          }

          &.fav {
            .hm-img("@{baseUrl}/good/fav.png")
          }

          &.fav-on {
            .hm-img("@{baseUrl}/good/fav-on.png")
          }
        }

        .text {
          color: rgba(0, 0, 0, 0.40);
          font-size: 20rpx;
        }
      }

      .btn {
        width: 160rpx;
        height: 58rpx;
        background: linear-gradient(#FF696C, #F24833);
        border-radius: 70rpx;
        .hm-flex();
        color: #ffffff;
        font-size: 24rpx;
      }
    }

    .ww-bottom-bar {
      height: 98rpx;
      width: 750rpx;
      box-sizing: content-box;
      background-color: #fff;
      position: fixed;
      bottom: 60rpx;
      bottom: 0rpx;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      .icon-wrap {
        width: 104rpx;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      background-color: #fff;

        .icon {
          width: 32rpx;
          height: 32rpx;
          // background-color: orange;
          background-size: 100% 100%;

          &.chat {
            .hm-img("@{baseUrl}/good/chat.png")
          }

          &.store {
            .hm-img("@{baseUrl}/good/store.png")
          }

          &.fav {
            .hm-img("@{baseUrl}/good/fav.png")
          }

          &.fav-on {
            .hm-img("@{baseUrl}/good/fav-on.png")
          }
        }

        .text {
          color: rgba(0, 0, 0, 0.40);
          font-size: 20rpx;
        }
      }

      .btn {
        width: 160rpx;
        // height: 58rpx;
        height: 100%;
        flex: 1;
        background: linear-gradient(#FF696C, #F24833);
        // border-radius: 70rpx;
        .hm-flex();
        color: #ffffff;
        font-size: 24rpx;
      }
    }
  }


}

.fake-wrap {
  width: 750rpx;
  height: 38rpx;
  background-color: transparent;
}

.popup-wrap {
  width: 750rpx;
  background-color: white;
  padding-bottom: constant(safe-area-inset-bottom);

  .good-img {
    position: absolute;
    width: 180rpx;
    height: 180rpx;
    border-radius: 4rpx;
    left: 32rpx;
    top: -38rpx;
    // z-index: 100;
  }

  // height: ;
  .popup-header {
    height: 174rpx;
    padding-left: 236rpx;
    position: relative;
    border-bottom: 2rpx solid #F2F2F2;

    .desc {
      height: calc(100% - 38rpx);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;

      .price {
        color: #F92929;
        font-size: 36rpx;
        font-weight: 500;

        .unit {
          font-size: 28rpx;
        }
      }

      .tip {
        font-size: 24rpx;
        margin: 4rpx 0;
        color: rgba(0, 0, 0, 0.4);
      }
    }

  }

  .popup-body {
    padding-bottom: 50rpx;

    .tc-wrap {
      padding: 0 34rpx;
      padding-top: 32rpx;
      padding-bottom: 24rpx;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      .tc-title {
        font-size: 28rpx;
        color: #333;
      }

      .tc-tags {
        margin-top: 12rpx;
        display: flex;
        flex-direction: column;
        // display: flex;
        justify-content: flex-start;
        // flex-direction: column;
        align-items: flex-start;
        .tc-tag {
          // width: 200rpx;
          // min-width: 10rpx;
          margin-top: 12rpx;

          // max-width: 180rpx;
          box-sizing: border-box;
          padding: 16rpx 32rpx;
          min-height: 72rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.25);
          border-radius: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-grow: 0;
          font-size: 28rpx;

          &.active {
            border: 2rpx solid #F24833;
            color: #F24833;
          }
        }
      }
    }

    .number-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 686rpx;
      height: 110rpx;
      margin: 0 auto;
      border-top: 2rpx solid #f2f2f2;
      border-bottom: 2rpx solid #f2f2f2;
      .title {
        font-size: 28rpx;
        color: #333;
      }

      .num-controller {
        display: flex;
        width: 152rpx;
        height: 48rpx;

        .plus {
          width: 52rpx;
          height: 48rpx;
          .hm-img("@{baseUrl}/spec/plus.png");
          // background-image: url();
          // background-size: 100% 100%;
        }

        .num {
          width: 48rpx;
          height: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          color: #333333;
        }

        .subtract {
          width: 52rpx;
          height: 48rpx;
          // background-image: url();
          // background-size: 100% 100%;
          .hm-img("@{baseUrl}/spec/subtract.png");

        }
      }
    }

    .btn {
      width: 686rpx;
      margin: 0 auto;
      margin-top: 10rpx;
      height: 74rpx;
      background: linear-gradient(#FF696C, #F24833);
      border-radius: 66rpx;
      color: #fff;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding-bottom: constant(safe-area-inset-bottom)
    }
  }
}